<template>
  <div class="domain-selector">
    <Tabs :active-key="activeDomain" @change="handleDomainChange">
      <TabPane
        v-for="domain in availableDomains"
        :key="domain.key"
        :tab="domain.name"
      >
        <template #tab>
          <div class="domain-tab">
            <IconifyIcon :icon="domain.icon" />
            <span>{{ domain.name }}</span>
            <Badge
              v-if="getDomainFieldCount(domain.key) > 0"
              :count="getDomainFieldCount(domain.key)"
              size="small"
            />
          </div>
        </template>
      </TabPane>
    </Tabs>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { Tabs, TabPane, Badge } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';
import type {
  PropertyDomain,
  DomainConfig,
} from '../../../../api/resource-center/types';

interface Props {
  domains: DomainConfig[];
  activeDomain: PropertyDomain;
  fieldCounts: Record<PropertyDomain, number>;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  'domain-change': [domain: PropertyDomain];
}>();

const availableDomains = computed(() =>
  props.domains.filter((domain) => domain.visible),
);

const handleDomainChange = (domainKey: string) => {
  emit('domain-change', domainKey as PropertyDomain);
};

const getDomainFieldCount = (domainKey: PropertyDomain) => {
  return props.fieldCounts[domainKey] || 0;
};
</script>

<style scoped>
.domain-selector {
  margin-bottom: 20px;
}

.domain-tab {
  display: flex;
  gap: 8px;
  align-items: center;
}
</style>
